<script setup lang="ts">
import type { EaTaskAppeal } from './type'

const baseApi = '/ea/ea-task-appeal'

const { loadData, loading, model } = useDetail<EaTaskAppeal>(baseApi)

defineExpose({ init: loadData })
</script>

<template>
  <el-empty v-if="!Object.keys(model).length" v-loading="loading" />
  <el-descriptions v-else v-loading="loading" :column="1" border>
    <el-descriptions-item label="申诉图片" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.appealPic }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="申诉理由" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.appealReason }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="申诉状态" label-class-name="item-label" label-align="right">
      <el-tag v-if="model.appealStatusLabel" :color="model.appealStatusLabel.ext?.color" effect="dark" type="info">
        {{ model.appealStatusLabel?.label }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="申诉理由类型" label-class-name="item-label" label-align="right">
      {{ model.appealType }}
    </el-descriptions-item>
    <el-descriptions-item label="申诉发起端" label-class-name="item-label" label-align="right">
      <el-tag v-if="model.userTypeLabel" :color="model.userTypeLabel.ext?.color" effect="dark" type="info">
        {{ model.userTypeLabel?.label }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="申诉人" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.appealUserId }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="被申诉人" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.beAppealUserId }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="处理端" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.handleUserType }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="处理人" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.handleUserId }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="处理时间" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.handleTime }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="处理备注" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.handleRemark }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="任务Id" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.taskId }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="任务记录Id" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.taskRecordId }}
      </span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped lang="scss">
.el-descriptions {
  :deep(.el-descriptions__header) {
    margin: 0 10px 12px;
  }

  :deep(.item-label) {
    width: 120px;
  }
}
</style>
